<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>AI - 训练</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    .wrapper {
      display: flex;
    }
    [v-cloak] {
      display: none;
    }
    .main {
      flex: 1;
      margin-right: 20px;
    }

    .pan1 {
      height: 300px;
      padding: 0 30px;
    }

    .panel-ul {
      display: flex;
      position: relative;
    }

    .panel-ul li {
      font-size: 12px;
      flex: 1;
      color: rgba(102, 102, 102, 1);
      line-height: 26px;
      position: relative;
      padding-top: 20px;
    }

    .panel-ul li:last-child {
      text-align: right;
    }

    .panel-ul::after {
      content: '';
      position: absolute;
      right: 0;
      top: 61px;
      left: 30px;
      width: 610px;
      height: 1px;
      background: #eee;
    }

    .hash-ul {
      height: 90px;
      position: absolute;
      top: 110px;
    }

    .hashfirst {
      color: #0E9CF2;
      font-size: 16px;
    }

    .hash-li {
      color: #999999;
    }

    .hash-order {
      position: absolute;
      top: 90px;
    }

    .hash-count-ul {
      background: #f8f7f7;
      width: 660px;
      height: 117px;
      position: absolute;
      top: 170px;
      padding-left: 30px;
    }

    .hash-count-ul li {
      padding-top: 13px;
      width: 300px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #666666;
      display: inline-block;

    }

    .hash-img img {
      display: inline-block;
      vertical-align: -2px;
      margin-right: 19px;
    }

    .state {
      position: absolute;
      top: 300px;
      font-size: 12px;
      padding: 0 30px;

    }

    .state span {
      color: #0E9CF2;
    }

    .state li {
      display: inline-block;
      margin-right: 6px;
    }

    .state img {
      display: inline-block;
      vertical-align: -2px;
      margin-right: 10px;
    }

    .side-r {
      flex: 1;
      position: relative;
      margin-right: 20px;
    }

    .side-img {
      height: 158px;
      width: 398px;
      background: url("images/lanjing.png")no-repeat center;
      position: absolute;
      left: 136px;
      top: 27px;
    }

    .creattask li:first-child {
      width: 154px;
      height: 36px;
      background: rgba(14, 156, 242, 1);
      border-radius: 3px;
      line-height: 36px;
      text-align: center;
      color: white;
      margin: 160px auto 0 auto;
      cursor: pointer;
    }

    .creattask li:last-child {
      width: 154px;
      height: 12px;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(204, 204, 204, 1);
      margin: 0 auto;
      line-height: 25px;
      text-align: center;
    }

    .creattask a {
      color: white;
    }

    .creattask li:first-child:hover {
      opacity: 0.9;
    }

    .hash-count-ul span {
      margin-right: 3px;
    }

    .d-lie,
    .c-li,
    .z-zhi {
      text-align: right;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #999999;
      width: 505px;
    }

    .c-ri:hover {
      color: #F28893;
      cursor: pointer;
    }
    [v-cloak]{
      display:none;
    }
    /**/
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="ai_training">
    <div class="main" v-for="(item,index) of taskData" :key="index" v-if="index < 2">
      <section class="panel">
        <a href="javascript:;" @click="G.to('ai_detailed&' + item.taskId)">
          <ul class="panel-ul pan1">
            <li>创建时间：{{item.createTime | formatDate}}</li>
            <li>任务编号：{{item.taskId}}</li>
          </ul>
          <ul class="hash-ul pan1">
            <li class="hashfirst">预估算力：{{G.roundFixed(item.hourTh * item.taskH)}} TH</li>
            <li class="hash-li">≈ {{G.roundFixed(item.hourTh / 11.3)}}张1080TI训练{{item.taskH}}小时</li>
          </ul>
          <ul class="hash-count-ul" v-if="item.trainingStatus == 2 || item.trainingStatus == 3 || item.trainingStatus == 4">
            <li>训练时长：<span>{{item.useTaskMStr}}</span></li>
            <li class="hash-img">
              <img src="images/loss.png">LOSS：<span>{{G.roundFixed(item.loss)}}</span>
            </li>
            <li>算力用量：<span>{{G.roundFixed(item.useGpuTotal)}}</span>TH</li>
            <li class="hash-img"><img src="images/Accuracy.png">精准度：<span>{{G.roundFixed(item.acc)}}</span></li>
            <li>训练进度：<span>{{G.roundFixed((item.useTaskM/(item.taskH*60))*100)}}</span>%</li>
          </ul>
          <ul class="state">
            <li>
              <img src="images/radio.png">状态：
              <span v-if="item.trainingStatus == 0">准备中</span>
              <span v-else-if="item.trainingStatus == 1">队列中</span>
              <span v-else-if="item.trainingStatus == 2">训练中</span>
              <span v-else-if="item.trainingStatus == 3">已终止</span>
              <span v-else-if="item.trainingStatus == 4">已完成</span>
              <span v-else-if="item.trainingStatus == 8">扩容中</span>
              <span v-else-if="item.trainingStatus == 9">处理中</span>
            </li>
            <li class="d-lie" v-if="item.trainingStatus == 1">在您前面还有 {{item.queueNum}} 个任务在等待<!--，等待时间<span>≈ 1天20小时50分</span>--></li>
            <li class="c-li" v-else-if="item.trainingStatus == 9">正在为您分配资源<!--，已等待<span>1天20小时50分</span>--></li>
            <!-- <li class="z-zhi" v-else-if="item.trainingStatus == 3">模型异常导致训练中断，您可以通过<span class="c-ri">错误日志</span>锁定错误原因</li> -->
          </ul>
        </a>
      </section>
    </div>
    <!-- :class="{g-loading: gLoading}" -->
    <div class="side-r" :class="{'g-loading': gLoading}" v-for="n of (taskData.length > 2 ? 0 : (2-taskData.length))">
      <section class="panel pan1">
        <div class="side-img">
          <ul class="creattask">
            <li><a href="javascript:;" @click="G.to('ai_create')">创建训练任务</a></li>
            <li>目前最多只能创建两个训练</li>
          </ul>
        </div>
      </section>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        taskData: [],
        gLoading: true,
      },
      mounted() {
        this.requestData();
      },
      methods: {
        requestData() {
          axios.get('/user/taskDatas')
            .then(res => {
              if (res.data.code == 1) {
                this.taskData = res.data.data
                this.gLoading = false
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
               
      },
      
      computed: {

      },
      filters:{
        formatDate(val,tmp){
          if(!tmp){
            tmp = 'YYYY-MM-DD HH:mm'
          }
          return moment(val).format(tmp)
        }
      }
    })
  </script>
</body>

</html>